<template>
  <div class="home-container">
    <el-container>
      <el-main>
        <el-row :gutter="5" class="portal-row">
          <el-col :span="18" class="portal-col">
            <el-card shadow="never" class="cardInfo">
              <div slot="header" class="clearfix">
                <span>企业信息</span>
                <div class="updateTime">
                  <label>账号期限：</label>
                  <span>{{ tenantParams.accountBegin }}~{{ tenantParams.accountEnd }}</span>
                </div>
              </div>
              <el-row :gutter="5" class="portal-row">
                <el-col :span="4" class="portal-col">
                  <div style="width: 100%;text-align: center;">

                    <img :src="tenantParams.logoFullPath" class="logo-img" alt="">
                  </div>
                </el-col>
                <el-col :span="10" class="portal-col">
                  <el-row :gutter="5" class="portal-row" style="max-height: 100%; font-size: 14px;">
                    <el-col :span="24" class="portal-col">
                      <div style="width:100%;margin-top:-1px;padding: 3px;">
                        <div class="home-baseInfo">
                          <label>企业简称:</label>
                        </div>
                        <div class="home-baseInfo" style="padding-left: 1.5625rem; color:darkgray;font-size:13px;">
                          <span>{{ tenantParams.sempleName }}</span>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="24" class="portal-col">
                      <div style="width:100%;margin-top:-1px;">
                        <div class="home-baseInfo">
                          <label>企业全称:</label>
                        </div>
                        <div class="home-baseInfo" style="padding-left: 1.5625rem;color:darkgray;font-size:13px;">
                          <span>{{ tenantParams.name }}</span>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="24" class="portal-col">
                      <div style="width:100%;margin-top:-1px;">
                        <div class="home-baseInfo">
                          <label>所属行业:</label>
                        </div>
                        <div class="home-baseInfo" style="padding-left: 1.5625rem;color:darkgray;font-size:13px;">
                          <span>{{ tenantParams.industryName }}</span>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="24" class="portal-col">
                      <div style="width:100%;margin-top:-1px;">
                        <div class="home-baseInfo">
                          <label>经营地址:</label>
                        </div>
                        <div class="home-baseInfo" style="padding-left: 1.5625rem;color:darkgray;font-size:13px;">
                          <span>{{ tenantParams.address }}</span>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="10" class="portal-col">
                  <div style="width:100%;margin-top:-1px;">
                    <div class="home-baseInfo">
                      <label>经营范围:</label>
                    </div>
                    <div class="home-baseInfo" style="padding-left: 1.5625rem;color:darkgray;font-size:13px;line-height:18px;">
                      <span>{{ tenantParams.introduce }}</span>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="6" class="portal-col">
            <el-card shadow="never" class="cardInfo" style="min-height: 330px;">
              <el-tabs v-model="activeTabs1">
                <el-tab-pane label="公众号" name="0">
                  <div class="home-baseInfo">
                    <div v-if="wxMpStatus">
                      <label>公众号名：</label><div style="color: darkgray;">{{ wxMpParams.name }}</div>
                      <label>认证主体：</label><div style="color: darkgray;">{{ wxMpParams.principalName }}</div>
                      <label>服务介绍：</label><div class="mp-signature" style="color: darkgray;"><span>{{ wxMpParams.description }}</span></div>
                      <label>授权状态：</label><div style="color: darkgray;">已授权</div>
                    </div>
                    <div v-else>
                      <el-button type="text" size="middle" style="width: 100px;border: 1px solid #e6ebf5;" @click="$router.push({name:'wxMpAuthorize'})">去绑定</el-button>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="小程序" name="1">
                  <div class="home-baseInfo">
                    <div v-if="wxMaStatus">
                      <label>小程序名：</label><div style="color: darkgray;">{{ wxMaParams.name }}</div>
                      <label>认证主体：</label><div style="color: darkgray;">{{ wxMaParams.principalName }}</div>
                      <label>服务介绍：</label><div class="category-names" style="color: darkgray;"><span>{{ wxMpParams.description }}</span></div>
                      <label>授权状态：</label><div style="color: darkgray;">已授权</div>
                    </div>
                    <div v-else>
                      <el-button type="text" size="middle" style="width: 100px;border: 1px solid #e6ebf5;" @click="$router.push({name:'wxMaAuthorize'})">去绑定</el-button>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="企业微信" name="2">
                  <div class="home-baseInfo">
                    <div v-if="wxCpStatus">
                      <label>企业微信：</label><div style="color: darkgray;">{{ wxCpParams.name }}</div>
                      <label>认证主体：</label><div style="color: darkgray;">{{ wxCpParams.principalName }}</div>
                      <label>服务介绍：</label><div class="category-names" style="color: darkgray;"><span>{{ wxMpParams.description }}</span></div>
                      <label>认证状态：</label><div style="color: darkgray;">已认证</div>
                    </div>
                    <div v-else>
                      <el-button type="text" size="middle" style="width: 100px;border: 1px solid #e6ebf5;" @click="$router.push({name:'wechatAppletAuthorize'})">去绑定</el-button>
                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="5" class="portal-row">
          <el-col :span="18" class="portal-col">
            <el-card shadow="never" class="cardInfo m-b-10">
              <div slot="header" class="clearfix">
                <span>常用功能</span>
                <span style="padding-left: 10px;cursor:pointer;font-size: 13px;color: cornflowerblue;" @click="openFavorityMenuDialog()">[设置]</span>
              </div>
              <div class="function-cont">
                <div v-for="(item,index) in userPermissionFavority" :key="index" @click="goFunctionLink(index, item)">
                  <div class="el-icon-paperclip" />
                  <div>{{ item.name }}</div>
                </div>
              </div>
            </el-card>
            <el-card shadow="never" class="cardInfo m-b-10">
              <div slot="header" class="clearfix">
                <span>我的事务</span>
              </div>
              <div class="agency-cont">
                <div v-for="(item,index) in agencyList" :key="index">
                  {{ item.name }}<br><span>{{ item.val }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6" class="portal-col">
            <div>
              <bulletinComponent :title="titleNotice" />
              <wikiComponent :title="titleStudy" />
            </div>
          </el-col>
        </el-row>
      </el-main>
      <ByMenu ref="byMenuDialog" @refresh="getPermissionFavority()" />
    </el-container>
  </div>
</template>

<script>
import { getTenant } from '@/api/tenement'
import { queryOpenAuthByType } from '@/api/wxMa'
import { getUserPermissionFavorityList } from '@/api/authority'
import { filterNumber, filterPrice } from '@/utils/filter'
import utils from '@/utils/utils'
import ByMenu from './components/byMenu'
export default {
  components: {
    ByMenu,
    bulletinComponent: () => import('./bulletinComponent.vue'),
    wikiComponent: () => import('./wikiComponent.vue')
  },
  filters: {
    toFixed0: filterNumber,
    toFixed2: filterPrice
  },
  data() {
    return {
      byMenuId: 0,
      activeTabs1: '0',
      activeTabs2: '0',
      promotionActive: '0',
      businessPatter: '0',
      updateTime: utils.dateFormatter(new Date(), 'yyyy-MM-dd hh:mm:ss'),
      commercialActivities: '0',
      userPermissionFavority: [],
      dateCondition: [],
      tenantParams: {},
      tenantCityArr: [],
      wxMpStatus: false,
      wxMpParams: {},
      wxCpStatus: false,
      wxCpParams: {},
      wxMaStatus: false,
      wxMaParams: {},
      titleNotice: '制度公告',
      titleStudy: '知识库',
      agencyList: [
        { name: '待办任务', val: 12 },
        { name: '已办任务', val: 10 },
        { name: '待阅任务', val: 15 },
        { name: '已阅任务', val: 10 },
        { name: '我的流程', val: 10 }
      ],
      functionList: []
    }
  },
  mounted() {
    this.getTenantInfo()
    this.getOpenAuthInfo(1, 1, 1)
    this.getOpenAuthInfo(1, 1, 2)
    this.getOpenAuthInfo(2, 2, 2)
    this.getPermissionFavority()
  },
  methods: {
    getTenantInfo() {
      getTenant({}).then(response => {
        this.tenantParams = response
      })
    },
    getPermissionFavority() {
      getUserPermissionFavorityList().then(res => {
        if (res) {
          this.userPermissionFavority = res
        } else {
          this.$message.info('读取收藏夹数据失败')
        }
      }).catch(() => {
        this.$message.info('读取收藏夹数据失败')
      })
    },
    openFavorityMenuDialog() {
      this.$refs.byMenuDialog.dialog = true
    },
    goFunctionLink(index, router) {
      this.$router.push({ 'name': router.route })
    },
    // 查询授权信息
    getOpenAuthInfo(configType, configSubType, appType) {
      queryOpenAuthByType({
        configType: configType,
        configSubType: configSubType,
        appType: appType
      }).then(res => {
        if (res) {
          if (configType === 1) {
            if (configSubType === 1) {
              if (appType === 2) {
                this.wxMpParams = res
                this.wxMpStatus = res.hasOpenAuth
              } else if (appType === 1) {
                this.wxMaParams = res
                this.wxMaStatus = res.hasOpenAuth
              }
            }
          } else if (configType === 2) {
            if (configSubType === 2) {
              if (appType === 2) {
                this.wxCpParams = res
                this.wxCpStatus = res.hasOpenAuth
              }
            }
          }
        }
      })
    },
    handleClick() {
      console.log(111)
    }
  }
}
</script>

<style lang="scss">
.m-b-10{
  margin-bottom: 10px;
}
.home-container {
  padding:0 !important;
  .agency-cont{
    display: flex;
    flex-wrap: wrap;
    >div{
      width: 20%;
      text-align: center;
      line-height: 30px;
      >span{
        color: #1890ff;
        font-size: 18px;
        font-weight: 700;
      }
    }
  }
  .function-cont{
    display: flex;
    flex-wrap: wrap;
    justify-content: left;

     >div{
      width: 14%;
      text-align: center;
      padding-bottom: 15px;
      line-height: 35px;

      >div{
        &:first-child{
          background: lightsteelblue;
          padding: 10px;
          cursor: pointer;
          border-radius: 6px;
          &::before{
            font-size: 35px;
            color: #fff;
          }
        }
        &:last-child{
          cursor: pointer;
          font-size: 14px;
        }
      }
     }
  }
  .category-names{
    display: flex;
    >div{
      &:last-child{
        span{
          display: none;
        }
      }
    }
  }
  background: #fff;
  padding: 10px;
  height: 100%;
  border-radius: 3px;
  overflow: auto;
  .portal-row {
      border: 0px solid #dddce2;
      border-radius: 1px;
      padding: 0px;
      display:flex;
      flex-wrap: wrap;
      .portal-col {
          border: 0px solid #dddce2;
          border-radius: 4px;
          padding: 4px;
          display: inline-block;
          line-height: 25px;
          vertical-align: top;
          .logo-img {
            width: 100px;
            height: 100px;
            margin: 0 30px 30px 0;
          }
      .cardInfo {
        padding: 4px;
        // height: 100%;
        transition: all .5s;
        .updateTime {
          font-size: 14px;
          color:#afafaf;
          font-weight: 400;
          float: right;
        }
        .realTimeData {
          padding:20px;
          padding-top: 0;
          display: flex;
          align-items: center;
          .realTimeData-detail:first-child {
            border-right: 1px solid #afafaf;
          }
          .realTimeData-detail {
            flex-grow: 1;
            display: flex;
            flex-wrap: wrap;
            .realTimeData-detail-item {
              width: 50%;
              display: flex;
              align-items: center;
              flex-direction: column;
              margin-top: 20px;
              line-height: 27px;
              >div {
                width:50%;
                .realTimeData-title {
                  color: #afafaf;
                  font-weight: 400;
                  font-size: 16px;
                  white-space: nowrap;
                }
                .realTimeData-number {
                  font-size: 18px;
                  color: #1890ff;
                  font-weight: 500;
                }
                .yesterday {
                  font-weight: 400;
                  font-size: 16px;
                }
                img {
                  width: 10px;
                  height: 10px;
                  margin-left: 10px;
                }
              }
            }
          }
        }
        .linkStr {
          color: #9FC4F0;
          cursor: pointer;
        }
        .sales-promotion {
          padding: 20px;
          display: flex;
          >div {
            border: 1px solid #e6ebf5;
            flex-grow: 1;
            width:0;
            margin-right: 20px;
          }
          >div:last-child {
            margin-right: 0;
          }
          .promotion-detail {
            display: flex;
            flex-direction: column;
            padding: 0 20px 20px;
            border: 0;
            >div {
              margin-top: 20px;
            }
          }
        }
        .circle-chart {
          #circle-chart {
            width:100%;
            height:90%;
          }
          display:flex;
          flex-direction: column;
          align-items:center;
        }
        .line-chart {
          display:flex;
          flex-direction: column;
          #line-chart {
            margin-top:10px;
            width:100%;
            height:500px;
          }
        }
        .histogram-chart {
          padding:10px;
          display:flex;
          flex-direction:column;
          #histogram-chart {
            width:100%;
            height:90%;
          }
          .tips {
            width:100%;
            text-align:left;
          }
          .statisticsNumber {
            text-align:right;
          }
        }
        .store-ranking {
          padding: 20px;
          .queryCondition {
            display:flex;
            align-items:center;
            margin-bottom:10px;
            >label {
              min-width:80px;
            }
          }
          .rankTitle {
            margin:20px 0 10px;
            >label {
              margin-right:10px;
            }
          }
          .rankItem {
            display:flex;
            align-items:center;
            .first {
              background-color: #de3e3e !important;
            }
            .second {
              background-color: #ff5911 !important;
            }
            .thirdly {
              background-color: #ff8849 !important;
            }
            .rankSort {
              width: 14%;
              background-color: #898989;
              border-radius: 5px;
              padding: 1px 0;
              margin-right: 1%;
              color: #fff;
              text-align:center;
            }
            .storeName {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              width: 30%;
              color: #898989;
              text-align: center;
            }
            .progress {
              width: 30%;
              height: 20px;
              background-image: linear-gradient(-90deg,#fad961,#feba82);
            }
            .countNumber {
              // float: right;
              flex-grow:1;
              color: #898989;
              text-align:center;
            }
          }
        }
      }
    }
  }
  .home-baseInfo {
    display: flex;
    align-items: center;
    >div {
      display: flex;
      flex-direction:column;
      flex-grow: 1;
      vertical-align: text-top;
      >img {
        width: 100px;
        height: 100px;
        margin-top: 10px;
      }
      >label {
        align-items: left;
        font-size: 14px;
        font-weight: 100;
      }
      >div {
        align-items: left;
        font-size: 13px;
        text-indent:25px;
        line-height:20px;
        font-weight: 500;
        padding: 4px 0;
      }

    }
  }
  .mp-signature{
      width: 95%;
      padding: 0 4px;
      height: 30px;
      line-height: 30px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
   }
}
</style>
